@import './var';
@import "./global/reset.scss";

.wrapper {
  width: 1200px;
  margin: 0 auto;

  .title {
    padding-top: 20px;
    border-bottom: 1px solid rgba(237, 237, 237, 1);
    ;

    h3 {
      font-size: 20px;
      font-weight: 500;
      line-height: 23px;
      color: rgba(58, 120, 234, 1);
      padding-bottom: 3px;
      position: relative;
      opacity: 1;

      &:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 121px;
        height: 2px;
        background: rgba(58, 120, 234, 1);
        opacity: 1;
      }
    }
  }

  .progress-bar {
    padding-top: 30px;

    .step {
      vertical-align: middle;
      height: 48px;
      display: inline-block;

      i {
        width: 48px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        display: inline-block;
        border-radius: 50%;
        background: rgba(244, 244, 244, 1);
        border: 1px solid rgba(221, 221, 221, 1);
        box-sizing: border-box;
        opacity: 1;
        font-size: 24px;
        font-weight: bold;
        color: rgba(102, 102, 102, 1);
        margin-right: 12px;
        vertical-align: top;
      }

      &.active i {
        background: rgba(58, 120, 234, 1);
        border: none;
        color: rgba(255, 255, 255, 1);
      }

      .info {
        display: inline-block;

        h5 {
          font-size: 16px;
          font-weight: normal;
          line-height: 25px;
          color: rgba(102, 102, 102, 1);
        }

        p {
          font-size: 10px;
          font-weight: 400;
          line-height: 14px;
          color: rgba(153, 153, 153, 1);
          padding-top: 4px;
        }
      }
    }

    .bar {
      display: inline-block;
      width: 320px;
      height: 1px;
      background: rgba(153, 153, 153, 1);
      opacity: 1;
      margin: 0 49px 0 43px;

      &:last-child {
        margin: 0 43px 0 49px;
      }
    }
  }

  .phone-form {
    text-align: center;
    padding-top: 94px;

    h5 {
      font-size: 18px;
      font-weight: 400;
      line-height: 25px;
      color: rgba(51, 51, 51, 1);
      padding-bottom: 20px;
    }

    p {
      font-size: 18px;
      line-height: 25px;
      color: rgba(102, 102, 102, 1);
    }

    .form-item {
      margin-top: 29px;

      label {
        width: 90px;
        text-align: right;
        display: inline-block;
        font-size: 18px;
        line-height: 25px;
        color: rgba(51, 51, 51, 1);
        margin-right: 8px;
      }

      .input {
        display: inline-block;
        width: 370px;
        height: 50px;
        border: 1px solid rgba(221, 221, 221, 1);
        background: #ffffff;
        border-radius: 4px;
        text-align: left;

        input {
          width: 346px;
          height: 100%;
          border: none;
          font-size: 14px;
          line-height: 20px;
          box-sizing: border-box;
          margin-left: 22px;
          padding-right: 22px;
        }

        input::-webkit-input-placeholder {
          color: rgba(170, 170, 170, 1);
        }

        .send {
          display: inline-block;
          font-size: 14px;
          line-height: 20px;
          color: rgba(170, 170, 170, 1);
          position: relative;
          padding-left: 24px;
          cursor: pointer;

          &:before {
            content: '';
            position: absolute;
            left: 0px;
            width: 1px;
            height: 20px;
            background: rgba(221, 221, 221, 1);
            opacity: 1;
          }
        }
      }

      &.code {
        input {
          width: 231px;
        }
      }
    }

    button {
      margin-top: 30px;
      width: 370px;
      height: 50px;
      background: rgba(58, 120, 234, 1);
      border-radius: 4px;
      font-size: 14px;
      line-height: 20px;
      color: rgba(255, 255, 255, 1);
    }
  }
}